<template>
    <div class="flex-container" :style="{ height: clientHeight + 'px' }">
        <div class="title">图片转PDF</div>
        <el-upload
            ref="upload"
            drag
            action="-"
            :auto-upload="false"
            list-type="picture-card"
            accept="image/png,image/jpg"
            multiple
            :file-list="fileList"
            :on-change="handleChange"
            :on-remove="handleRemove"
        >
            <i class="el-icon-plus"></i>
        </el-upload>
        <div>
            <el-button @click="handleBack" size="medium" round style="margin-top: 25px">返回主页</el-button>
            <el-button type="primary" @click="handleConvert" size="medium" round style="margin-top: 25px"
                >转&nbsp;&nbsp;&nbsp;&nbsp;换</el-button
            >
        </div>
    </div>
</template>

<script>
import { PDFDocument } from 'pdf-lib'
import saveAs from 'file-saver'
export default {
    data() {
        return {
            clientHeight: document.documentElement.clientHeight || document.body.clientHeight,
            fileList: []
        }
    },
    methods: {
        async embedImages() {
            const pdfDoc = await PDFDocument.create()
            const a4WidthPt = 210 * 72 / 25.4
            const a4HeightPt = 297 * 72 / 25.4
            for (let i = 0; i < this.fileList.length; i++) {
                let url = this.fileList[i].url
                let type = this.fileList[i].raw.type
                const imageBytes = await fetch(url).then(res => res.arrayBuffer())
                const pdfPage = pdfDoc.addPage()
                if (type === 'image/png') {
                    const image = await pdfDoc.embedPng(imageBytes)
                    const { width, height } = image.scaleToFit(a4WidthPt, a4HeightPt)
                    pdfPage.drawImage(image, {
                        x: 0,
                        y: (pdfPage.getHeight() - height) / 2,
                        width: width,
                        height: height,
                        opacity: 1
                    })
                } else {
                    const image = await pdfDoc.embedJpg(imageBytes)
                    const { width, height } = image.scaleToFit(a4WidthPt, a4HeightPt)
                    pdfPage.drawImage(image, {
                        x: 0,
                        y: (pdfPage.getHeight() - height) / 2,
                        width: width,
                        height: height,
                        opacity: 1
                    })
                }
            }
            const pdfBytes = await pdfDoc.save()
            let blob = new Blob([pdfBytes])
            saveAs(blob, 'imageToPdf.pdf')
            this.$refs.upload.clearFiles()
        },
        handleChange(file, fileList) {
            this.fileList = fileList
        },
        handleRemove(file, fileList) {
            this.fileList = fileList
        },
        handleBack() {
            this.$router.replace('/')
        },
        handleConvert() {
            if (this.fileList.length === 0) {
                this.$message.error('请上传图片')
            } else {
                this.embedImages()
            }
        }
    }
}
</script>

<style scoped>
.flex-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.el-button--primary {
    background-color: #505587;
    border-color: #505587;
}
.el-upload-dragger .el-upload__text em {
    color: #505587;
}
::v-deep .el-upload-dragger {
    width: 100%;
    height: 100%;
    border: none;
}
.title {
    font-size: 24px;
    line-height: 34px;
    color: #33333b;
    font-weight: 600;
    margin-bottom: 25px;
}
</style>
